<template>
    <div class="scripts-container">

        <div class="filter-container">

            <el-select
                v-model="genreFilter"
                placeholder="选择类型"
                clearable
                style="margin-left: 15px; width: 150px"
            >
                <el-option
                    v-for="genre in genres"
                    :key="genre"
                    :label="genre"
                    :value="genre"
                />
            </el-select>

            <el-select
                v-model="difficultyFilter"
                placeholder="选择难度"
                clearable
                style="margin-left: 15px; width: 150px"
            >
                <el-option
                    v-for="difficulty in difficulties"
                    :key="difficulty.value"
                    :label="difficulty.label"
                    :value="difficulty.value"
                />
            </el-select>

            <el-button
                type="primary"
                style="margin-left: 15px"
                @click="handleReset"
            >
                重置
            </el-button>
        </div>

        <div class="scripts-grid">
            <script-card
                v-for="script in paginatedScripts"
                :key="script.id"
                :script="script"
                @click.native="goToScriptDetail(script.id)"
            />
        </div>

        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="filteredScripts.length"
            @current-change="handlePageChange"
        />
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ScriptCard from './scriptcard/index.vue'
import { mockScripts } from '@/components/api/mockData.js'

const router = useRouter()

// 数据状态
const scripts = ref([])
const searchQuery = ref('')
const genreFilter = ref('')
const difficultyFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(12)

// 模拟数据
const genres = ref([
    '恐怖', '推理', '情感', '欢乐', '机制',
    '还原', '硬核', '阵营', '沉浸', '现代'
])

const difficulties = ref([
    { value: 1, label: '简单' },
    { value: 2, label: '中等' },
    { value: 3, label: '困难' },
    { value: 4, label: '烧脑' }
])

// 获取剧本数据
onMounted(async () => {
    scripts.value = await mockScripts()
})

// 过滤后的剧本
const filteredScripts = computed(() => {
    let result = scripts.value

    // 按搜索词过滤
    if (searchQuery.value) {
        result = result.filter(script =>
            script.title.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
    }

    // 按类型过滤
    if (genreFilter.value) {
        result = result.filter(script =>
            script.genres.includes(genreFilter.value)
        )
    }

    // 按难度过滤
    if (difficultyFilter.value) {
        result = result.filter(script =>
            script.difficulty === difficultyFilter.value
        )
    }

    return result
})

// 分页数据
const paginatedScripts = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredScripts.value.slice(start, end)
})

// 方法
const handleSearch = () => {
    currentPage.value = 1
}

const handleSearchClear = () => {
    searchQuery.value = ''
    currentPage.value = 1
}

const handleReset = () => {
    searchQuery.value = ''
    genreFilter.value = ''
    difficultyFilter.value = ''
    currentPage.value = 1
}

const handlePageChange = (page) => {
    currentPage.value = page
}

const goToScriptDetail = (id) => {
    router.push({ name: 'script-detail', params: { id } })
}
</script>

<style scoped>
.scripts-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.filter-container {
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}
</style>